<template>
  <n-layout embedded>
    <n-space vertical size="small" align="center">
      <n-descriptions label-placement="left" separator=" "
                      title="团辅设置" :column="1" bordered>
        <n-descriptions-item label="攻击力(加算)">
          <n-input-number v-model:value="attr.atk" :step="10">
            <template #prefix>{{ prefix(attr.atk) }}</template>
          </n-input-number>
        </n-descriptions-item>
        <n-descriptions-item label="攻击力(乘算)">
          <n-input-number v-model:value="attr.atkpct" :step="5">
            <template #prefix>{{ prefix(attr.atkpct) }}</template>
            <template #suffix>%</template>
          </n-input-number>
        </n-descriptions-item>
        <n-descriptions-item label="攻击速度(加算)">
          <n-input-number v-model:value="attr.ats">
            <template #prefix>{{ prefix(attr.ats) }}</template>
          </n-input-number>
        </n-descriptions-item>
        <n-descriptions-item label="技力回复(加算)">
          <n-input-number v-model:value="attr.cdr" :step="10">
            <template #prefix>{{ prefix(attr.cdr) }}</template>
            <template #suffix>%</template>
          </n-input-number>
        </n-descriptions-item>
        <n-descriptions-item label="基础攻击力(乘算)">
          <n-input-number v-model:value="attr.base_atk" :step="5">
            <template #prefix>{{ prefix(attr.base_atk) }}</template>
            <template #suffix>%</template>
          </n-input-number>
        </n-descriptions-item>
        <n-descriptions-item label="伤害倍率(乘算)">
          <n-input-number v-model:value="attr.damage_scale" :step="5">
            <template #prefix>{{ prefix(attr.damage_scale) }}</template>
            <template #suffix>%</template>
          </n-input-number>
        </n-descriptions-item>
      </n-descriptions>
      <pre v-if="debug">
{{ props }}
      </pre>
    </n-space>
  </n-layout>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { computedAsync } from '@vueuse/core'
import { useI18n } from 'vue-i18n'
import { Maybe } from 'purify-ts/Maybe'
import { NTooltip, NButton, NCode, NInputNumber,
         NSelect, NDescriptions, NDescriptionsItem, NSpace } from 'naive-ui'
import { apiGet } from '../utils'

// 传给该组件的参数，使用toRef取得响应式引用
// 值修改emit给上层组件
const props = defineProps({
  attr: {
    atk: { type: Number, default: 0 },
    atkpct: { type: Number, default: 0 },
    ats: { type: Number, default: 0 },
    cdr: { type: Number, default: 0 },
    base_atk: { type: Number, default: 0 },
    damage_scale: { type: Number, default: 0 }
  },
  debug: { type: Boolean, default: false }
})

const emit = defineEmits({
  'update:attr': {
    atk: Number,
    atkpct: Number,
    ats: Number,
    cdr: Number,
    base_atk: Number,
    damage_scale: Number
  }
})

// 双向绑定
const attr = ref({
  atk: 0,
  atkpct: 0,
  ats: 0,
  cdr: 0,
  base_atk: 0,
  damage_scale: 0
})
emit('update:attr', attr.value) // 实际上改变了引用?

// script setup上下文中不能使用Vue.$t，必须单独引入
const { t, locale } = useI18n()

const prefix = (x: number) => (x > 0 ? '+' : ' ')

</script>

<style scoped>
.n-slider {
  min-width: 200px;
}
.n-input-number {
  max-width: 120px;
}
</style>
